<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">学历认证</view>
			<view class="blank"></view>
		</view>

		<view class="banxin auth">
			<view v-if="authStatus==1">
				<view class="why">
					学历认证
				</view>
				<view class="info">
					请如实填写学历认证信息
				</view>
			</view>
			<view v-if="authStatus==0">
				<view class="why">
					<image src="/static/img/auth_success.png" mode="" />
					已认证
				</view>
				<view class="info">
					您已于{{authTime}} 提交了学历认证
				</view>
			</view>
			<view v-if="authStatus==2">
				<view class="why">
					<image src="/static/img/auth_pending.png" mode="" />
					审核中
				</view>
				<view class="info">
					您已于{{authTime}} 提交了学历认证
				</view>
			</view>
			<view v-if="authStatus==3">
				<view class="why">
					<image src="/static/img/auth_fail.png" mode="" />
					未通过
				</view>
				<view class="info">
					未通过原因：{{nopassReason?nopassReason:'产证看不清，请重新提交'}}
				</view>
			</view>
			<view class="education">
				<view class="income">
					<view class="label">
						<text>您的最高学历</text>
						<view class="open" @click="handleEducation">
							<text class="label1">{{education?education:'请选择'}}</text>
							<image src="/static/img/open.png" mode="" />
						</view>
					</view>
				</view>
				<view class="income">
					<view class="label">
						<text>您的毕业学校</text>
						<view class="open" @click="handleSchool">
							<text class="label1">{{school?school:'请选择'}}</text>
							<image src="/static/img/open.png" mode="" />
						</view>
					</view>
				</view>
				<view class="income">
					<view class="label">
						<text>上传证书照片</text>
					</view>
					<image @click="handleUpload" class="choose" :src="fileUrl?fileUrl:'/static/img/choose.png'"
						mode="" />
				</view>
			</view>
			<view class="tip2">
				<image src="/static/img/tip.png" mode="" />
				<text>仅供平台审核，未经您的允许不会对外公开；
					证书编号，姓名必须清晰可见，且姓名与实名认证一致。</text>
			</view>
			<button v-if="authStatus==1||authStatus==3" class="next" type="primary" @click="handleSubmit">提交审核</button>
		</view>

		<u-popup closeable :show="showEducation" mode='bottom' @close="closeEducation">
			<view class="my-popup">
				<view class="income_title">
					选择学历
				</view>
				<view class="selector">
					<!-- 			<view class="list income">
			     <van-picker columns="{{ educationList }}" 
				  bind:change="changeEducation" 
				  default-index="{{ 2 }}"/>
				</view> -->
					<picker-view @change="changeEducation" :value="educationValue" class="my-picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in educationList" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<div class="confirm">
					<button type="primary" @click="confirmEducation">确认</button>
				</div>
			</view>
		</u-popup>

		<u-popup closeable :show="showSchool" mode='bottom' @close="closeSchool">
			<view class="my-popup">
				<view class="income_title">
					毕业学校
				</view>
				<view class="selector">
					<view class="list school">
						<view class="my-input">
							<input class="uni-input" name="name" @input="changeSchool" placeholder="请输入学校名称" />
						</view>
					</view>
				</view>
				<div class="confirm">
					<button type="primary" @click="confirmSchool">确认</button>
				</div>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				showEducation: false,
				showSchool: false,
				educationList: ['中专', '大专', '本科', '硕士', '博士'],
				education: '',
				viceEducation: '',
				nopassReason: '',
				school: '',
				viceSchool: '',
				uploadFile: '',
				fileUrl: '/static/img/choose.png',
				authStatus: 0,
				authTime: '',
				educationValue: [2]
			};
		},
		onLoad() {
			this.viceEducation = this.educationList[2]
			let that = this
			request(`/employee/${uni.getStorageSync('id')}`).then((res) => {
				console.log(res.data.data.authentication, 'authentication');
				let authentication = res.data.data.authentication
				this.authStatus = authentication.educationStatus
				this.authTime = authentication.educationTime
				this.fileUrl = authentication.educationUrl
				this.education = authentication.education
				this.school = authentication.school
				this.nopassReason = authentication.nopassReason
			})
		},
		methods: {
			// 假设blob是一个图片的Blob对象
			blobToBase64(blob, callback) {
				// 创建FileReader对象
				let reader = new FileReader();
				reader.onload = function(e) {
					// 当读取操作完成时，调用callback函数并传入转换后的base64字符串
					callback(e.target.result);
				};
				reader.readAsDataURL(blob);
			},
			handleUpload() {
				if (this.authStatus == 0 || this.authStatus == 2) {
					return
				}
				let that = this
				uni.chooseImage({
					count: 1,
					mediaType: ['mix'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						// uni.showLoading({
						//   title: '加载中',
						// });
						that.fileUrl = res.tempFilePaths[0]
						console.log(res.tempFilePaths, 'res')
						// 预览图片
						let xhr = new XMLHttpRequest();
						xhr.open('GET', res.tempFilePaths[0], true);
						xhr.responseType = 'blob';
						xhr.onload = function() {
							if (this.status == 200) {
								let blob = this.response;
								console.log(this.response,'this.response');
								// 调用转换函数
								that.blobToBase64(blob, function(base64) {
									console.log('Base64:', base64.slice(23));
									// 此处可以使用base64，例如赋值给img的src或者其他用途
									that.uploadFile = base64.slice(23)
								});
							}
						};
						xhr.send();
					}
				})
			},
			handleSubmit() {
				if (!this.education || !this.school) {
					uni.showToast({
						title: '请填写学历信息',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.uploadFile) {
					uni.showToast({
						title: '请上传证书照片',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: '加载中',
				});
				let that = this
				request(`/sms/educationAuthenticate`, {
					method: 'POST',
					data: {
						base64Data: this.uploadFile,
						education: this.education,
						school: this.school
					}
				}).then(((res) => {
					console.log(res.data, 'res');
					if (res.data.code == 1) {
						uni.showToast({
							title: '已提交审核，请耐心等待，或联系红娘为您快速处理',
							icon: 'none',
							duration: 2000
						})
						that.authStatus = 2
					}
				}))
			},
			handleEducation() {
				if (this.authStatus == 0 || this.authStatus == 2) {
					return
				}
				this.showEducation = true
			},
			changeEducation(event) {
				console.log(event.detail.value, 'changeEducation');
				let index = event.detail.value[0]
				this.viceEducation = this.educationList[index]
				this.educationValue[0] = index
			},
			confirmEducation() {
				this.education = this.viceEducation
				this.showEducation = this.false
			},
			closeEducation() {
				this.showEducation = false
			},
			handleSchool() {
				if (this.authStatus == 0 || this.authStatus == 2) {
					return
				}
				this.showSchool = true
			},
			closeSchool() {
				this.showSchool = false
			},
			changeSchool(e) {
				console.log(e.detail.value, 'changeSchool');
				this.viceSchool = e.detail.value
			},
			confirmSchool() {
				this.school = this.viceSchool
				this.showSchool = false
			},
		}
	}
</script>

<style lang="scss">
@import "@/style/auth.scss";

.tip2 {
	display: flex;
	align-items: flex-start;

	image {
		margin-top: -35rpx;
		margin-right: 50rpx;
	}
}

.education {
	margin-top: 60rpx;
	font-size: 28rpx;

	.income {
		overflow: hidden;
		margin-top: 40rpx;

		.label,
		.tip {
			display: flex;
			justify-content: space-between;
		}

		.choose {
			width: 140rpx;
			height: 140rpx;
			margin-top: 30rpx;
		}

		.label1 {
			color: rgba(102, 102, 102, 1);
		}

		.van-slider {
			margin-top: 35rpx;
		}

		.tip {
			font-size: 28rpx;
		}

		.open {
			display: flex;
			align-items: center;

			.label1 {
				color: rgba(166, 166, 166, 1);
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.next {
	position: absolute;
	width: 85%;
	bottom: 100rpx;
}

.u-popup /deep/ .u-popup__content {
	.my-popup {
		height: 500rpx;
	}

	.income_title {
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		margin-top: 30rpx;
	}

	.selector {
		margin-top: 20rpx;

		.income {
			margin-top: 10rpx;
		}

		.school {
			width: 100%;
			margin: 0 auto;
		}

		.my-input {
			width: 85%;
			margin: 0 auto;
			margin-top: 120rpx;
		}

	}

	.list {
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.income {
		width: 100%;

		.van-picker {
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto;
		}
	}

	button {
		width: 65%;
		position: absolute;
		bottom: 30rpx;
		left: 0;
		right: 0;
		background-color: rgb(117, 38, 38);
	}
}

.my-picker-view {
	width: 750rpx;
	height: 300rpx;
	margin-top: 20rpx;
}

.item {
	line-height: 100rpx;
	text-align: center;
}
</style>